<template>
  <child :name='name' @updateName="updateName"/>  
  <!--  or  -->
  <!-- <child :name='name' @update-name="updateName"/>   -->
</template>

<script lang="ts" setup>
  // 引入子组件
  import { reactive, toRefs } from 'vue';
import child from './children-component.vue'

  const state = reactive({
    name: 'Jeremy'
  })

  // 接收子组件触发的方法
  const updateName = (name:string) =>{
   state.name = name
  }
  const {name} = toRefs(state)
</script>
<style scoped>
.my-box{
    display: flex;
}
  /* 支持CSS变量注入v-bind(color) */
</style>
